<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Buttons And Toggle Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Buttons And Toggle</h1>
        </gs-jumbo>
        <gs-container min-width="sml;med;lrg">
            <h3 class="doc-header">Tags:</h3>
            <p>
                &lt;gs-button&gt;&lt;/gs-button&gt;<br />
                &lt;gs-email-button&gt;&lt;/gs-email-button&gt;<br />
                &lt;gs-facetime-button&gt;&lt;/gs-facetime-button&gt;<br />
                &lt;gs-map-button&gt;&lt;/gs-map-button&gt;<br />
                &lt;gs-phone-button&gt;&lt;/gs-phone-button&gt;<br />
                &lt;gs-skype-button&gt;&lt;/gs-skype-button&gt;<br />
                &lt;gs-tracking-button&gt;&lt;/gs-tracking-button&gt;<br />
                &lt;gs-toggle&gt;&lt;/gs-toggle&gt;
            </p>
            
            <h3 class="doc-header">Description:</h3>
            <p>
                It is recommended that you use buttons in place of hyperlinks when the target is an application or download. This way your users will come to expect that buttons 'do things' while hyperlinks lead to a document which will display in the browser. Your users will appreciate consistent application of button and hyperlink usage.<br /><br />
                Buttons come with button-appropriate styling such as hover which can be altered using the greyspots css file.<br /><br />
                Buttons provide the "onclick" attribute for inline Javascript. Alternately, you can of course use addEventListener('click', function(){}) instead. Additionally, there are href and target attributes like HTML anchor tags. <br /><br />
                See below for examples of the many options available for button behavior and styling. Note that the special-use buttons covered in the last section can also use all of the behavior and styling options.<br /><br />
            </p>
            
            <h1 class="doc-header">Examples:</h1>
            <div class="doc-section">
                <div class="doc-example-description">
                    <span class="h3">Skeleton Example:</span><br />
                    <p>A basic gs-button element. Without attributes the button will have the following behavior: </p>
                    <ol>
                        <li><p>) When the button receives mousedown, the appearance chages. It will change back after mouseup or mouseout.</p></li>
                    </ol>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-button>Test</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "onclick":</span><br />
                    <p>The onclick attribute allows you to run Javascript as a result of clicking on the button.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-button onclick="alert('test')">Test</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Event "click":</span><br />
                    <p>Another way of running Javascript from a button is to add a listener to the button. Typically you use a id= attribute to make sure you are listening on the right button.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-button id="button_test">Test</gs-button>
                    </template>
                    <template for="js" height="10">
                        window.addEventListener('load', function () {
                            document.getElementById('button_test').addEventListener('click', function () {
                                alert('test');
                            });
                        });
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attributes "href" and "value":</span><br />
                    <p>Sometimes you want to open a page like you would a link, but you want the appearance of a button. The target="" and href="" attributes work just like with an &lt;a&gt; tag. This is especially recommended if the target is an application or a download. Note that new windows will either appear as new browser windows or new tabs depending on brower settings. To force a file to download, use the HTML5 download="" attribute to set the file name. Or just use download by itself. Also note that the "href" and "value" attributes are interchangable.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="auto">
                        <gs-button href="http://www.wikipedia.org/">
                            "href" Attribute
                        </gs-button>
                        <gs-button value="http://www.wikipedia.org/">
                            "value" Attribute
                        </gs-button>
                        <gs-button href="http://www.wikipedia.org/" target="_self">
                            "target" Attribute (Replace Page)
                        </gs-button>
                        <gs-button href="http://www.wikipedia.org/" target="_blank">
                            "target" Attribute (New Tab/Page)
                        </gs-button>
                        <gs-button href="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" download>
                            "download" Attribute (Download Image)
                        </gs-button>
                        <gs-button href="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png">
                            No Attribute (Won't Download)
                        </gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description" id="qsattribute">
                    <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                    <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                    
                    <ul>
                        <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                        <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                    </ul>
                </div>
                <gs-doc-example query-string="test1=test1&test2=test2">
                    <template for="html" height="35">
                        <gs-button qs="test1">Test 1</gs-button>
                        <gs-button qs="test2=value">Test 2</gs-button>
                        <gs-button qs="test3=hidden">Test 3</gs-button>
                        <gs-button qs="test4!=hidden">Test 4</gs-button>
                        <br />
                        <br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test1=test1');">Add "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test2=test2');">Add "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test3=test3');">Add "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.pushQueryString('test4=test4');">Add "test4"</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                            </gs-block>
                        </gs-grid>
                    </template>
                </gs-doc-example>
                
                <br />
                <h1>Behavior and Display Options:</h1>
                <div class="doc-example-description">
                    <span class="h3">Icons:</span><br />
                    <p>Buttons can have icons. These icons can be rotated and moved to different sides inside the button.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="25">
                        <gs-button icon="glass">Test</gs-button>
                        <br />
                        <gs-button iconrotateright icon="glass">Test</gs-button>
                        <gs-button iconrotatedown icon="glass">Test</gs-button>
                        <gs-button iconrotateleft icon="glass">Test</gs-button>
                        <br />
                        <gs-button iconleft icon="glass">Test</gs-button>
                        <gs-button iconright icon="glass">Test</gs-button>
                        <gs-button icontop icon="glass">Test</gs-button>
                        <gs-button iconbottom icon="glass">Test</gs-button>
                        <gs-button icononly icon="glass"></gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "jumbo":</span><br />
                    <p>Buttons by default are control height, this is so that when you place a button next to a control it doesn't look out of place. When the "jumbo" attribute is present the button is larger than control height.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="9">
                        <br />
                        <gs-button>Default</gs-button>
                        <br />
                        <gs-button jumbo>Jumbo</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "no-focus":</span><br />
                    <p>When the "no-focus" attribute is present the button cannot be tabbed to.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="10">
                        <gs-text placeholder="Tab from here to the buttons below"></gs-text>
                        <gs-button>Focusable</gs-button>
                        <gs-button no-focus>Not Focusable</gs-button>
                        <gs-text></gs-text>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "key":</span><br />
                    <p>In this example we have two buttons with the "key" attribute set. The "key" attribute is for defining a hot-key for a button. Note: you have to click into the example for it to work.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="7">
                        <gs-button onclick="alert('Test 1 (CMD-a or CTRL-a)')" key="a">Test 1 (CMD-a or CTRL-a)</gs-button>
                        <gs-button onclick="alert('Test 2 (CMD-b or CTRL-b)')" key="b">Test 2 (CMD-b or CTRL-b)</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "no-modifier-key":</span><br />
                    <p>In this example we have two buttons with the "key" and "no-modifier-key" attributes set. The "no-modifier-key" attribute means that you can't use CMD or CTRL to activate the hot-key. Note: you have to click into the example for it to work.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="7">
                        <gs-button onclick="alert('Test 1 (a)')" key="a" no-modifier-key>Test 1 (a)</gs-button>
                        <gs-button onclick="alert('Test 2 (b)')" key="b" no-modifier-key>Test 2 (b)</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "tabindex":</span><br />
                    <p>With this attribute, you can control what order your controls are tabbed to.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="12">
                        <gs-text tabindex="1" value="First"></gs-text>
                        <gs-button tabindex="3">Third</gs-button>
                        <gs-text tabindex="2" value="Second"></gs-text>
                        <gs-text tabindex="4" value="Fourth"></gs-text>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attributes "inline" and "mini":</span><br />
                    <p>The inline attribute forces the button to be the smallest size possible with the text. The mini attribute lessens the height of the button and removes the border.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="12">
                        <gs-button>None</gs-button>
                        <gs-button inline>Inline</gs-button>
                        <gs-button mini>Mini</gs-button>
                        <gs-button mini inline>Both</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "disabled":</span><br />
                    <p>The disabled attribute greys out the button and prevents click events.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-button onclick="alert('test')">Enabled</gs-button>
                        <gs-button onclick="alert('test')" disabled>Disabled</gs-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attributes "bg-*" and "txt-*":</span><br />
                    <p>The bg- attributes makes the button stand out by changing the background color. The txt- attributes change the font color.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="35">
                        <gs-button>Default</gs-button>
                        <gs-button bg-primary>Primary</gs-button>
                        <gs-button bg-success>Success</gs-button>
                        <gs-button bg-info>Info</gs-button>
                        <gs-button bg-warning>Warning</gs-button>
                        <gs-button bg-danger>Danger</gs-button>
                        <gs-button txt-muted>Muted</gs-button>
                        <gs-button txt-primary>Primary</gs-button>
                        <gs-button txt-success>Success</gs-button>
                        <gs-button txt-info>Info</gs-button>
                        <gs-button txt-warning>Warning</gs-button>
                        <gs-button txt-danger>Danger</gs-button>
                    </template>
                </gs-doc-example>
                
                <!--<div class="doc-example-description">
                    <span class="h3">Attribute "remove-" and related:</span><br />
                    <p>Sometimes you want the remove the rounded corners on your button. This is usually used with grids.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="68">
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button remove-right>Remove Right</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-left>Remove Left</gs-button>
                            </gs-block>
                        </gs-grid><br />
                        <gs-button remove-bottom>Remove Bottom</gs-button>
                        <gs-button remove-top>Remove Top</gs-button><br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button remove-bottom-right>Remove Bottom Right</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-bottom-left>Remove Bottom Left</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-top-right>Remove Top Right</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-top-left>Remove Top Left</gs-button>
                            </gs-block>
                        </gs-grid><br />
                        <gs-grid widths="1,1">
                            <gs-block>
                                <gs-button remove-right remove-bottom>Remove Bottom and Right</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-left remove-bottom>Remove Bottom and Left</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-right remove-top>Remove Top and Right</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button remove-left remove-top>Remove Top and Left</gs-button>
                            </gs-block>
                        </gs-grid><br />
                        <gs-button remove-top-right remove-bottom-left>Remove Top Right and Bottom Left</gs-button><br />
                        <gs-button remove-bottom-right remove-top-left>Remove Bottom Right and Top Left</gs-button><br />
                        <gs-button remove-all>Remove All</gs-button>
                    </template>
                </gs-doc-example>
            </div>-->
            
            <b class="doc-header">Special-use Button Examples:</b>
            <div class="doc-section">
                <p>These button elements can't accept "href" and "target" attributes. All other attributes work as expected.</p>
                <div class="doc-example-description">
                    <span class="h3">Email Button:</span><br />
                    <p>This button will attempt to open a new email in an email client using the HREF="mailto:" attribute of the anchor tag. If the user does not have an email client configured then the behavior is determined by the browser and Operating System. Its possible not all "mailto:" keys (such as BCC) will populate properly for all clients so you should test on your user's system before relying on gs-email. <br />
                    The gs-email-button is very useful but be aware that in some situations its best to put up a form and send email through the server. For example, on a public website its best to provide a form so that email addresses are not searchable by spammers. On the other hand, if you're writing a private application the user may want all outgoing email to be stored in their sent folder and the only way to do that is to use the "mailto:" API. </p>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-email-button value="an-address@a-domain.com?subject=Feedback&body=Love It!&cc=a-diff-address@a-domain.com&bcc=another-diff-address@a-domain.com">E-mail</gs-email-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Apple Facetime Button:</span><br />
                    <p>This button will attempt open an Apple Facetime call. This button uses the "facetime:" link to attempt the call.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-facetime-button value="an-address@a-domain.com">Facetime</gs-facetime-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Map Button:</span><br />
                    <p>This button will open up a map in either Google Maps or Microsoft Bing Maps.</p>
                    <ol>
                        <li><p>)For Google Maps the button uses this link:</p></li>
                        <li><p>)https://maps.google.com/maps?q=LOCATIONTOSEARCHFOR</p></li>
                        <li><p>)For Microsoft Bing Maps the button uses this link:</p></li>
                        <li><p>)http://www.bing.com/maps/default.aspx?q=LOCATIONTOSEARCHFOR</p></li>
                    </ol>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-map-button google value="North Richland Hills">Google Maps</gs-map-button>
                        <gs-map-button bing value="North Richland Hills">Microsoft Bing Map</gs-map-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Phone Button:</span><br />
                    <p>This button will make a phone call if a phone line is available. Depending on the browser and operating system: if a phone line is not availible then it may send the link to applications such as Microsoft Skype. This button uses the "tel:" link to attempt the call.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="20">
                        <gs-phone-button value="555-555-5555">Phone</gs-phone-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Microsoft Skype Button:</span><br />
                    <p>This button will attempt to start a Microsoft Skype call. Microsoft Skype software must be installed for it to work. This button uses the "skype:" link to attempt the call.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="6">
                        <gs-skype-button value="this.is.a.skype.name.that.i.just.made.up">Microsoft Skype</gs-skype-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Package Tracking Button:</span><br />
                    <p>This button will open package tracking pages for some common delivery services.</p>
                    <ol>
                        <li><p>For UPS the button uses this link:<br />
                               &nbsp;&nbsp;http://www.ups.com/WebTracking/processInputRequest?tracknum=TRACKINGNUMBER</p></li>
                        <li><p>For USPS the button uses this link:<br />
                               &nbsp;&nbsp;https://tools.usps.com/go/TrackConfirmAction?tLabels=TRACKINGNUMBER</p></li>
                        <li><p>For FEDEX the button uses this link:<br />
                               &nbsp;&nbsp;https://www.fedex.com/apps/fedextrack/index.html?tracknumbers=TRACKINGNUMBER</p></li>
                    </ol>
                </div>
                <gs-doc-example>
                    <template for="html" height="9">
                        <gs-tracking-button ups value="TRACKINGNUMBER">Track UPS Package</gs-tracking-button>
                        <gs-tracking-button usps value="TRACKINGNUMBER">Track USPS Package</gs-tracking-button>
                        <gs-tracking-button fedex value="TRACKINGNUMBER">Track FEDEX Package</gs-tracking-button>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Toggle Button:</span><br />
                    <p>This button will toggle between two values when clicked. When getting the value of a gs-toggle like this: <span class="doc-mono"><i>TOGGLE</i>.value</span> you will get a Boolean type value.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="10">
                        <gs-toggle value="true">Toggle 1</gs-toggle>
                        <gs-toggle value="false">Toggle 2</gs-toggle>
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Onchange Attribute Example:</span>
                    <p>To run javascript when the value changes, use the <code>[onchange=""]</code> attribute.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="5">
                        <gs-toggle onchange="alert(this.value)">Toggle 1</gs-toggle>
                    </template>
                </gs-doc-example>
                <!-- ##################################################################################### -->
                <!-- ########### NOTE TO DEV: this is the special-use button example section   ########### -->
                <!-- ########### if you are creating a new example make sure you put it in the ########### -->
                <!-- ########### right section.                                                ########### -->
                <!-- ##################################################################################### -->
            </div>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>